<template>
  <div class="system-customer main">
    <div>自定义字段设置</div>

    <div class="main-body">
      <el-table v-loading="loading" :data="tableList" border style="width: 100%;">
        <el-table-column width="100" label="模块图标">
          <template slot-scope="scope">
            <div class="table-icon">
              <i :class="getLableIcon(scope.row.label)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="模块" show-overflow-tooltip />
        <el-table-column prop="name" label="更新时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime == 0 ? '暂无' : scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary-text" style="padding: 0;"
              @click="handleCustomField('edit', scope.row, scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { queryFields } from "@/api/customer/common";


export default {
  name: 'CustomField',

  components: {

  },

  data () {
    return {
      loading: false,
      tableHeight: document.documentElement.clientHeight - 140, // 表的高度
      // 自定义字段设置
      tableList: []
    }
  },

  created () {
    // 控制table的高度
    window.onresize = () => {
      self.tableHeight = document.documentElement.clientHeight - 140
    }

    this.getDetail()
  },

  methods: {
    /**
     * 详情
     */
    getDetail () {
      this.loading = true
      queryFields()
        .then(res => {
          this.tableList = res.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 列表的编辑和预览
     */
    handleCustomField (type, item, index) {
      if (type === 'edit') {
        console.log("item.label===",item.label);
        console.log("item.label===",type);
        console.log("item.label===",item);
        this.$router.push({
          name: 'rp_customer',
          params: {
            label: item.label
          },
        });
        // this.$router.push({
        //   path: '/system/customerManagement/rp_customer',
        //   params: {
        //     type: 'rp_customer',
        //     id: 'none',
        //     label: 2
        //   }
        // })

      }
    },

    /**
     * 根据自定义字段types 获取展示icon
     */
    getLableIcon (label) {
      return {
        1: 'rp rp-leads',
        2: 'rp rp-customer',
        3: 'rp rp-contacts',
        4: 'rp rp-product',
        5: 'rp rp-business',
        6: 'rp rp-contract',
        7: 'rp rp-receivables',
        8: 'rp rp-icon-plan-solid',
        17: 'rp rp-icon-visit-solid',
        18: 'rp rp-invoice'
      }[label] || 'rp rp-icon-all-solid'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.main-body {
  margin-top: #{$--interval-base * 2};
}
</style>
